<template>
  <div class="loading-skeleton">
    <!-- 卡片骨架屏 -->
    <div v-if="type === 'card'" class="skeleton-card">
      <n-skeleton height="120px" :sharp="false" />
      <div class="skeleton-content">
        <n-skeleton text :repeat="2" />
        <n-skeleton text style="width: 60%" />
      </div>
    </div>

    <!-- 列表骨架屏 -->
    <div v-else-if="type === 'list'" class="skeleton-list">
      <div v-for="i in count" :key="i" class="skeleton-list-item">
        <n-skeleton height="60px" width="60px" :sharp="false" />
        <div class="skeleton-list-content">
          <n-skeleton text style="width: 80%" />
          <n-skeleton text style="width: 60%" />
        </div>
      </div>
    </div>

    <!-- 表格骨架屏 -->
    <div v-else-if="type === 'table'" class="skeleton-table">
      <div class="skeleton-table-header">
        <n-skeleton text v-for="i in 4" :key="i" style="width: 20%" />
      </div>
      <div v-for="i in count" :key="i" class="skeleton-table-row">
        <n-skeleton text v-for="j in 4" :key="j" style="width: 20%" />
      </div>
    </div>

    <!-- 文本骨架屏 -->
    <div v-else-if="type === 'text'" class="skeleton-text">
      <n-skeleton text :repeat="count" />
    </div>

    <!-- 默认骨架屏 -->
    <div v-else class="skeleton-default">
      <n-skeleton height="200px" :sharp="false" />
      <div class="skeleton-content">
        <n-skeleton text :repeat="3" />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
interface Props {
  type?: 'card' | 'list' | 'table' | 'text' | 'default'
  count?: number
}

withDefaults(defineProps<Props>(), {
  type: 'default',
  count: 3
})
</script>

<style scoped>
.loading-skeleton {
  width: 100%;
}

/* 覆盖 n-skeleton 组件的默认样式，移除绿色边框 */
.loading-skeleton :deep(.n-skeleton) {
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

.loading-skeleton :deep(.n-skeleton__placeholder) {
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

.loading-skeleton :deep(.n-skeleton .n-skeleton__placeholder) {
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

/* 针对不同类型的骨架屏元素 */
.loading-skeleton :deep(.n-skeleton--text) {
  border: none !important;
}

.loading-skeleton :deep(.n-skeleton--block) {
  border: none !important;
}

.skeleton-card {
  padding: 16px;
  border-radius: 8px;
}

.skeleton-content {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.skeleton-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.skeleton-list-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  border-radius: 8px;
}

.skeleton-list-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.skeleton-table {
  border-radius: 8px;
  overflow: hidden;
}

.skeleton-table-header {
  display: flex;
  justify-content: space-between;
  padding: 16px;
}

.skeleton-table-row {
  display: flex;
  justify-content: space-between;
  padding: 16px;
}

.skeleton-text {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.skeleton-default {
  padding: 16px;
  border-radius: 8px;
}
</style>
